2 september 2025Svenska

Utforska Reacts experimentella hook experimental_useFormStatus för strömlinjeformad hantering av formulärstatus. Lär dig implementering, fördelar och avancerad användning med verkliga exempel.

Implementering av React experimental_useFormStatus: Förbättrad hantering av formulärstatus

Reacts ständigt utvecklande landskap introducerar kontinuerligt verktyg och tekniker för att förbättra utvecklarupplevelsen och applikationens prestanda. En sådan experimentell funktion är experimental_useFormStatus-hooken, utformad för att förenkla hanteringen av formulärstatus, särskilt i serveråtgärder och scenarier med progressiv förbättring. Denna omfattande guide kommer att utforska experimental_useFormStatus-hooken i detalj, med praktiska exempel och insikter för dess effektiva användning.

Vad är `experimental_useFormStatus`?

experimental_useFormStatus-hooken är ett experimentellt API som introducerats av React-teamet för att erbjuda ett enklare sätt att spåra statusen för en formulärinskickning, särskilt vid användning av serveråtgärder. Innan denna hook krävde hantering av ett formulärs olika tillstånd (inaktiv, skickar, lyckad, fel) ofta komplex logik för tillståndshantering. experimental_useFormStatus syftar till att abstrahera bort mycket av denna komplexitet och erbjuda ett enkelt och effektivt sätt att övervaka och reagera på formulärs inskickningsstatus.

Viktiga fördelar:

Förenklad tillståndshantering: Minskar mängden standardkod som behövs för att hantera formulärs inskickningsstatus.
Förbättrad användarupplevelse: Möjliggör mer responsiva UI-uppdateringar baserat på formulärets status.
Förbättrad kodläsbarhet: Gör formulärrelaterad kod lättare att förstå och underhålla.
Sömlös integration med serveråtgärder: Designad för att fungera särskilt bra med React Server Components och serveråtgärder.

Grundläggande implementering

För att illustrera den grundläggande implementeringen av experimental_useFormStatus, låt oss titta på ett enkelt exempel med ett kontaktformulär. Detta formulär kommer att samla in en användares namn, e-post och meddelande och sedan skicka det med en serveråtgärd.

Förutsättningar

Innan du dyker in i koden, se till att du har ett React-projekt uppsatt med följande:

En React-version som stöder de experimentella API:erna (kontrollera Reacts dokumentation för den nödvändiga versionen).
React Server Components aktiverat (används vanligtvis i ramverk som Next.js eller Remix).

Exempel: Ett enkelt kontaktformulär

Här är en grundläggande kontaktformulärkomponent:

```jsx // app/actions.js (Serveråtgärd) 'use server' export async function submitContactForm(formData) { // Simulera ett databasanrop eller API-förfrågan await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'Alla fält är obligatoriska.' }; } try { // Ersätt med faktiskt API-anrop eller databasoperation console.log('Formulär inskickat:', { name, email, message }); return { success: true, message: 'Formuläret har skickats!' }; } catch (error) { console.error('Fel vid inskickning av formulär:', error); return { success: false, message: 'Det gick inte att skicka formuläret.' }; } } // app/components/ContactForm.jsx (Klientkomponent) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Namn:

E-post:

Meddelande:

</div>
      <SubmitButton />
    </form>
  );
}
```

<h3>Förklaring</h3>

<ul>
  <li><b>Serveråtgärd (<code>app/actions.js</code>):</b> Denna fil definierar funktionen <code>submitContactForm</code>, som är en serveråtgärd. Den simulerar en API-förfrågan med en 2-sekunders fördröjning för att demonstrera den asynkrona naturen av formulärinskickning. Den hanterar också grundläggande validering och felhantering.</li>
  <li><b>Klientkomponent (<code>app/components/ContactForm.jsx</code>):</b> Denna fil definierar komponenten <code>ContactForm</code>, som är en klientkomponent. Den importerar <code>experimental_useFormStatus</code>-hooken och <code>submitContactForm</code>-åtgärden.</li>
  <li><b>Användning av <code>useFormStatus</code>:</b> Inuti <code>SubmitButton</code>-komponenten anropas <code>useFormStatus</code>. Denna hook ger information om formulärets inskickningsstatus.</li>
  <li><b><code>pending</code>-egenskapen:</b> Egenskapen <code>pending</code> som returneras av <code>useFormStatus</code> indikerar om formuläret för närvarande skickas. Den används för att inaktivera skicka-knappen och visa meddelandet "Skickar...".</li>
  <li><b>Formulärbindning:</b> <code>form</code>-elementets <code>action</code>-prop är bunden till serveråtgärden <code>submitContactForm</code>. Detta talar om för React att anropa serveråtgärden när formuläret skickas.</li>
</ul>

<h2>Avancerad användning och överväganden</h2>

<h3>Hantering av lyckade och felaktiga tillstånd</h3>

<p>Medan <code>experimental_useFormStatus</code> förenklar spårningen av inskickningsstatus, behöver du ofta hantera lyckade och felaktiga tillstånd explicit. Serveråtgärder kan returnera data som indikerar framgång eller misslyckande, vilket du sedan kan använda för att uppdatera UI:t.</p>

<p><b>Exempel:</b></p>

```jsx
// app/components/ContactForm.jsx (Modifierad)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Skickar...' : 'Skicka'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Namn:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">E-post:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">Meddelande:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Förklaring:</b></p>

<ul>
  <li><b>Tillstånd för meddelanden:</b> En tillståndsvariabel <code>message</code> introduceras för att lagra resultatet som returneras av serveråtgärden.</li>
  <li><b>Hantering av resultatet:</b> Efter att formuläret har skickats uppdaterar <code>handleSubmit</code>-funktionen <code>message</code>-tillståndet med resultatet från serveråtgärden.</li>
  <li><b>Visning av meddelanden:</b> Komponenten visar meddelandet baserat på <code>success</code>-egenskapen i resultatet, och applicerar olika CSS-klasser för lyckade och felaktiga tillstånd.</li>
</ul>

<h3>Progressiv förbättring</h3>

<p><code>experimental_useFormStatus</code> briljerar i scenarier med progressiv förbättring. Genom att successivt förbättra ett standard HTML-formulär med React kan du erbjuda en bättre användarupplevelse utan att offra grundläggande funktionalitet om JavaScript misslyckas.</p>

<p><b>Exempel:</b></p>

<p>Börja med ett grundläggande HTML-formulär:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Namn:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">E-post:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Meddelande:</label>
    <textarea id="message" name="message" required>

```

Du kan sedan successivt förbättra det med React och experimental_useFormStatus.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Använd null som initialt tillstånd om det inte används return (

Namn:

E-post:

Meddelande:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<p><b>Förklaring:</b></p>

<ul>
  <li><b>Initialt HTML-formulär:</b> Filen <code>public/contact.html</code> innehåller ett standard HTML-formulär som fungerar även utan JavaScript.</li>
  <li><b>Progressiv förbättring:</b> Komponenten <code>EnhancedContactForm</code> förbättrar successivt HTML-formuläret. Om JavaScript är aktiverat tar React över och ger en rikare användarupplevelse.</li>
  <li><b><code>useFormState</code>-hooken:</b> Använder <code>useFormState</code> för att hantera formulärstillstånd och binda serveråtgärden till formuläret.</li>
	<li> <b><code>state</code>:</b> <code>state</code> från <code>useFormState</code> innehåller nu returvärdet från serveråtgärden, som kan kontrolleras för framgångs- eller felmeddelanden.</li>
</ul>

<h3>Internationella överväganden</h3>

<p>När du implementerar formulär för en global publik spelar flera internationella överväganden in:</p>

<ul>
  <li><b>Lokalisering:</b> Se till att dina formuläretiketter, meddelanden och felmeddelanden är lokaliserade till olika språk. Verktyg som i18next kan hjälpa till att hantera översättningar.</li>
  <li><b>Datum- och nummerformat:</b> Hantera datum- och nummerformat enligt användarens locale. Använd bibliotek som <code>Intl</code> eller <code>moment.js</code> (för datumformatering, även om det nu anses vara föråldrat) för att formatera datum och siffror korrekt.</li>
  <li><b>Adressformat:</b> Olika länder har olika adressformat. Överväg att använda ett bibliotek som stöder flera adressformat eller skapa anpassade formulärfält baserat på användarens plats.</li>
  <li><b>Validering av telefonnummer:</b> Validera telefonnummer enligt internationella standarder. Bibliotek som <code>libphonenumber-js</code> kan hjälpa till med detta.</li>
  <li><b>Stöd för höger-till-vänster (RTL):</b> Se till att din formulärlayout stöder RTL-språk som arabiska eller hebreiska. Använd logiska CSS-egenskaper (t.ex. <code>margin-inline-start</code> istället för <code>margin-left</code>) för bättre RTL-stöd.</li>
  <li><b>Tillgänglighet:</b> Följ tillgänglighetsriktlinjer (WCAG) för att säkerställa att dina formulär är användbara för personer med funktionsnedsättningar, oavsett deras plats.</li>
</ul>

<p><b>Exempel: Lokaliserade formuläretiketter</b></p>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/sv.json
{
  "contactForm": {
    "nameLabel": "Namn",
    "emailLabel": "E-post",
    "messageLabel": "Meddelande",
    "submitButton": "Skicka",
    "successMessage": "Formuläret har skickats!",
    "errorMessage": "Det gick inte att skicka formuläret."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Förklaring:</b></p>

<ul>
  <li><b>Översättningsfiler:</b> Exemplet använder <code>react-i18next</code> för att hantera översättningar. Separata JSON-filer innehåller översättningar för olika språk.</li>
  <li><b><code>useTranslation</code>-hooken:</b> <code>useTranslation</code>-hooken ger tillgång till översättningsfunktionen (<code>t</code>), som används för att hämta lokaliserade strängar.</li>
  <li><b>Lokaliserade etiketter:</b> Formulärets etiketter och knapptext hämtas med hjälp av <code>t</code>-funktionen, vilket säkerställer att de visas på användarens föredragna språk.</li>
</ul>

<h3>Tillgänglighetsöverväganden</h3>

<p>Att säkerställa att dina formulär är tillgängliga för alla användare, inklusive de med funktionsnedsättningar, är avgörande. Här är några viktiga tillgänglighetsöverväganden:</p>

<ul>
  <li><b>Semantisk HTML:</b> Använd semantiska HTML-element som <code><label></code>, <code><input></code>, <code><textarea></code>, och <code><button></code> korrekt.</li>
  <li><b>Etiketter:</b> Associera etiketter med formulärkontroller med hjälp av <code>for</code>-attributet på <code><label></code> och <code>id</code>-attributet på formulärkontrollen.</li>
  <li><b>ARIA-attribut:</b> Använd ARIA-attribut för att ge ytterligare information till hjälpmedelstekniker. Använd till exempel <code>aria-describedby</code> för att länka en formulärkontroll till en beskrivning.</li>
  <li><b>Felhantering:</b> Markera fel tydligt och ge hjälpsamma felmeddelanden. Använd ARIA-attribut som <code>aria-invalid</code> för att indikera ogiltiga formulärkontroller.</li>
  <li><b>Tangentbordsnavigering:</b> Se till att användare kan navigera i formuläret med tangentbordet. Använd <code>tabindex</code>-attributet för att kontrollera fokusordningen om det behövs.</li>
  <li><b>Färgkontrast:</b> Säkerställ tillräcklig färgkontrast mellan text och bakgrundsfärger.</li>
  <li><b>Formulärstruktur:</b> Använd en tydlig och konsekvent formulärstruktur. Gruppera relaterade formulärkontroller med <code><fieldset></code> och <code><legend></code>-element.</li>
</ul>

<p><b>Exempel: Tillgänglig felhantering</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Skickar...' : 'Skicka'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // Grundläggande validering på klientsidan
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Namn är obligatoriskt.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'E-post är obligatoriskt.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Meddelande är obligatoriskt.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // Rensa tidigare fel
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Namn:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">E-post:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">Meddelande:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Förklaring:</b></p>

<ul>
  <li><b>Feltillstånd:</b> Komponenten upprätthåller ett <code>errors</code>-tillstånd för att spåra valideringsfel.</li>
  <li><b>Validering på klientsidan:</b> Funktionen <code>handleSubmit</code> utför grundläggande validering på klientsidan innan formuläret skickas.</li>
  <li><b>ARIA-attribut:</b> <code>aria-invalid</code>-attributet sätts till <code>true</code> om det finns ett fel för en specifik formulärkontroll. <code>aria-describedby</code>-attributet länkar formulärkontrollen till felmeddelandet.</li>
  <li><b>Felmeddelanden:</b> Felmeddelanden visas bredvid motsvarande formulärkontroller.</li>
</ul>

<h2>Potentiella utmaningar och begränsningar</h2>

<ul>
  <li><b>Experimentell status:</b> Eftersom det är ett experimentellt API kan <code>experimental_useFormStatus</code> komma att ändras eller tas bort i framtida React-versioner. Det är viktigt att hålla sig uppdaterad med Reacts dokumentation och vara beredd på att anpassa din kod om det behövs.</li>
  <li><b>Begränsad omfattning:</b> Hooken fokuserar främst på att spåra inskickningsstatus och erbjuder inte omfattande funktioner för formulärhantering som validering eller datahantering. Du kan fortfarande behöva implementera ytterligare logik för dessa aspekter.</li>
  <li><b>Beroende av serveråtgärder:</b> Hooken är utformad för att fungera med serveråtgärder, vilket kanske inte passar alla användningsfall. Om du inte använder serveråtgärder kan du behöva hitta alternativa lösningar för att hantera formulärstatus.</li>
</ul>

<h2>Slutsats</h2>

<p><code>experimental_useFormStatus</code>-hooken erbjuder en betydande förbättring i hanteringen av formulärs inskickningsstatus i React, särskilt när man arbetar med serveråtgärder och progressiv förbättring. Genom att förenkla tillståndshantering och erbjuda ett tydligt och koncist API förbättrar det både utvecklar- och användarupplevelsen. Med tanke på dess experimentella natur är det dock avgörande att hålla sig informerad om uppdateringar och potentiella förändringar i framtida React-versioner. Genom att förstå dess fördelar, begränsningar och bästa praxis kan du effektivt utnyttja <code>experimental_useFormStatus</code> för att bygga mer robusta och användarvänliga formulär i dina React-applikationer. Kom ihåg att beakta internationalisering och bästa praxis för tillgänglighet för att skapa inkluderande formulär för en global publik.</p></div><template id="P:4"></template></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><div hidden id="S:4"><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formulärstatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React-formulär</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experimentellt API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React hooks</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formulärinskickning</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asynkrona formulär</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressiv förbättring</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>

Implementering av React experimental_useFormStatus: Förbättrad hantering av formulärstatus

Vad är experimental_useFormStatus?

Grundläggande implementering

Förutsättningar

Exempel: Ett enkelt kontaktformulär

Vad är `experimental_useFormStatus`?